jQuery(document).ready(function ($) {
    // 添加事件
    $('#title').on('keydown', function (e) {
        if (e.keyCode == 13) {
            if ($(this).val().trim() == '') return alert('请输入数据');
            let data = getData();
            data.push({ title: $(this).val(), done: false });
            saveData(data);
            $(this).val('');
            load();
        }
    });

    // 删除
    $('#todolist, #donelist').on('click', 'a', function () {
        let index = $(this).data('index');
        let data = getData();
        // 删除数据
        data.splice(index, 1);
        saveData(data);
        load();
    });

    // 选中
    $('#todolist, #donelist').on('click', 'input[type="checkbox"]', function () {
        let index = $(this).siblings('a').data('index');
        let data = getData();
        data[index].done = $(this).prop('checked');
        saveData(data);
        load();
    });

    // 修改
    $('#todolist, #donelist').on('dblclick', 'p', function () {
        let text = $(this).text();
        $(this).html(`<input type="text" value="${text}">`);
        $(this).find('input').focus();
    });

    // 失去焦点
    $('#todolist, #donelist').on('blur', 'p>input', function () {
        let index = $(this).parent().siblings('a').data('index');
        let data = getData();
        data[index].title = $(this).val();
        saveData(data);
        load();
    });

    // 回车时
    $('#todolist, #donelist').on('keyup', 'p>input', function (e) {
        if (e.keyCode == 13)
            e.target.blur();
    });

    // 本地存储
    // 获取
    function getData() {
        data = localStorage.getItem('todoList');
        if (null == data) return [];
        return JSON.parse(data);
    }

    // 存储
    function saveData(data) {
        localStorage.setItem('todoList', JSON.stringify(data));
    }

    // 显示
    load(); //初始化
    function load() {
        let data = getData();
        $('#todolist, #donelist').empty();
        let todocount = 0;
        let donecount = 0;
        $.each(data, function (i, el) {
            if (el.done) {
                donecount++;
                $('#donelist').prepend(`<li><input type="checkbox" checked><p>${el.title}</p><a href="javascript:;" data-index="${i}"></a></li>`);
            } else {
                todocount++;
                $('#todolist').prepend(`<li><input type="checkbox"><p>${el.title}</p><a href="javascript:;" data-index="${i}"></a></li>`);
            }
        });
        $('#donecount').text(donecount);
        $('#todocount').text(todocount);
    }
});